<script>
// 文件数据
export default {
  name: 'FileRes',
  props: {
    //对话框状态
    modalState: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  data() {
    return {
      //数据标题
      dataTitle: '',
      //数据列
      columns: [],
      //数据
      data: null,
      //数据类型
      dataType: '92101',
      //数据类型列表
      dataTypeList: [
        {
          value: '92101',
          label: 'Excel文件',
        },
        {
          value: '92102',
          label: 'CSV文件',
        },
        {
          value: '92103',
          label: 'JSON文件',
        },
        {
          value: '92104',
          label: 'Access文件',
        },
        {
          value: '92105',
          label: '空间文件',
        },
      ],
    };
  },
  computed: {
    //文件格式类型
    formatType() {
      switch (this.dataType) {
        case '92101':
        case '92102':
          return 0;
        case '92103':
          return 1;
        default:
          return 2;
      }
    },
  },
  methods: {
    //读Excel文件(xls,csv)
    readExcelFile(file) {
      if (file.body.length == 0) {
        this.$Message.warning('Excel表无数据！');
        return;
      }
      this.columns = [];
      for (let k of Object.keys(file.body[0])) {
        this.columns.push({ title: k, key: k });
      }
      this.data = file.body;
    },
    //读文本数据(txt,json)
    readTextFile(data) {
      let reader = new FileReader();
      reader.onload = () => {
        this.data = JSON.parse(reader.result);
      };
      reader.readAsText(data);
      return false;
    },
    //数据校验
    validateData() {
      if (this.dataTitle == '') {
        this.$Message.warning('数据标题为必填项！');
        return false;
      }
      if (!this.data) {
        this.$Message.warning('请上传数据文件！');
        return false;
      }
      return true;
    },
    //获取新增文件数据
    getAddedModel() {
      let newData = {
        name: this.dataTitle,
        dataType: this.dataType,
        data: this.data,
        createTime: new Date(),
      };
      return newData;
    },
    //切换时重置输入
    resetInputs() {
      this.columns = [];
      this.data = null;
    },
  },
};
</script>
<template>
  <div class="filedata">
    <h2>文件数据</h2>
    <Row>
      <Col span="8">
      <span>数据标题：</span>
      </Col>
      <Col span="16">
      <Input v-model="dataTitle"></Input>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>文件类型：</span>
      </Col>
      <Col span="16">
      <Select
        v-model="dataType"
        @on-change="resetInputs">
        <Option
          v-for="item in dataTypeList"
          :value="item.value"
          :key="item.value"
        >{{ item.label }}</Option>
      </Select>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>上传文件</span>
      </Col>
      <Col span="16">
      <vue-xlsx-table
        v-if="formatType==0"
        @on-select-file="readExcelFile">
        <span>上传文件</span>
      </vue-xlsx-table>
      <Upload
        v-else
        :before-upload="readTextFile"
        action="#">
        <Button
          type="primary">上传文件</Button>
      </Upload>
      </Col>
    </Row>
    <Row>
      <Table
        v-if="formatType==0&&columns.length>0"
        :columns="columns"
        :data="data"
        height="200"></Table>
      <Input
        v-else-if="formatType==1&&data"
        :value="JSON.stringify(data,null,2)"
        :rows="10"
        readonly
        type="textarea"
        class="text-preview">
      </Input>
    </Row>
  </div>
</template>


<style lang="less" scoped>
.filedata {
  .k-row {
    margin-top: 10px;
  }
  .xlsx-button {
    height: 30px;
    width: 100%;
  }

  .k-select,
  .k-input-wrapper {
    width: 200px;
  }
  .text-preview {
    width: 100%;
  }
}
</style>
